import React from 'react'
import {withRouter} from 'react-router-dom'
// icon
import InfoIcon from '../../../res/images/web/FootballGameCard/game／news@2x.png'
import SmallPlayBtn from '../../../res/images/web/shared/small-triangle.png'
// constants
// antd-mobile
import {Icon, WingBlank,} from "antd-mobile"
// utils
// import '../../ga/FootballGameCard.css'
import './SearchGameCard.css'
import {getDifferenceBetweenDates, formatScheduleDate, formatDate, getWeekDayFromDateString} from "../../../utils/dateService";
import MarkedIcon from "../../../res/images/web/game/shoucang_selected@2x.png";
import MarkIcon from "../../../res/images/web/game/shoucang@2x.png";
import LocalStorageService from "../../../utils/LocalStorageService";

const SearchGameCard = props => {

    const {
        game,
        history,
    } = props

    const {
        matchId,
        // eventId,
        status,
        schedule,
        startAt,
        homeTeam,
        awayTeam,
        // gameInfo,
        seasonInfo,
        // stageInfo,
        event,
        stage,
        gameIndex,
    } = game

    // 比赛状态判断条件
    const isEarly = status === 1
    // const isStarted = status >= 2 || startAt <= 7
    const isFirstHalf = status === 2
    const isHalfTime = status === 3
    const isSecondHalf = status === 4
    const isJiashi = status === 5
    const isFinished = status === 8
    const isDelay = status >= 9

    const startAtTimeObj = new Date(startAt * 1000)
    const now = new Date()
    const diff = getDifferenceBetweenDates(startAtTimeObj, now)

    // const cTimeStyle = {
    //     color: !isEarly  ? `#FFA500` : '#ddd',
    // }
    const competitionName = event.short_name_zh
    let date = formatDate(new Date(schedule * 1000))
    let scheduleTime = formatScheduleDate(new Date(schedule * 1000))
    let weekday = getWeekDayFromDateString(new Date(schedule * 1000))

    // let pushDateString = formatDate(new Date(schedule * 1000))
    // console.log(pushDateString)
    let curTime
    if (isEarly) curTime = '未'
    if (isFirstHalf) curTime = <>上半场 {diff.minutesDiff + 1}<span className='second-blink'>'</span></>
    // if (isHalfTime) curTime = <>半场 45<span className='second-blink'>'</span></>
    if (isHalfTime) curTime = <>中</>
    if (isSecondHalf) curTime = <>下半场 {diff.minutesDiff + 45 + 1}<span className='second-blink'>'</span></>
    if (isJiashi) curTime = <>下半场 90+<span className='second-blink'>'</span></>
    if (isFinished) curTime = <>完</>

    // const infoOffer = seasonInfo[3] === 1
    // const infoIcon = <div className='game-football-game-item-header-info'>
    //     <img src={InfoIcon} alt='' style={{width: '40px',}}/>
    //     <span className='game-football-game-item-header-info-span'>情报</span>
    // </div>
    let isMarked = false
    const dateString = formatDate(new Date(schedule * 1000))
    const login = LocalStorageService.get('isLogin')
    if (login) {
        const ls = LocalStorageService.get('follow_games')
        if (ls) {
            const markList = LocalStorageService.get('follow_games')[dateString]
            if (markList) {
                isMarked = markList.findIndex(game => game.matchId === matchId) > -1
            }
        }
    }
    const mark = isMarked ? <div
        className='game-football-game-item-header-mark'
        // onClick={}
    >
        <img src={isMarked ? MarkedIcon : MarkIcon} alt=''/>
    </div> : null

    const headerTemplate = (
        <WingBlank>
            <div className='game-football-game-item-header'>
                <div className='game-football-game-item-header-category'>{competitionName}</div>
                <div className='game-football-game-item-header-sa'>{isDelay ? '' : scheduleTime}</div>

                {isDelay ?
                    <div className='game-football-game-item-header-delay'>推迟</div>
                    : <div className='game-football-game-item-header-ct'>{curTime}</div>
                }
                {/*<div className='game-football-game-item-header-ct' style={cTimeStyle}>{isDelay ? '已推迟' : curTime}</div>*/}
                {/*<div className='game-football-game-item-header-ct' style={cTimeStyle}>{isFinished ? '已结束' : null}</div>*/}
                {/*{infoOffer ? infoIcon : null}*/}
                {mark}
            </div>
        </WingBlank>

    )

    // players template
    // console.log(homeTeam)
    const homeTeamDetail = homeTeam.detail
    const awayTeamDetail = awayTeam.detail
    const homeTeamName = homeTeamDetail.name_zh
    const homeScore = homeTeam.teamScore
    const homeScoreHalf = homeTeam.teamScoreHalf
    const awayScoreHalf = awayTeam.teamScoreHalf
    const awayTeamName = awayTeamDetail.name_zh
    const awayScore = awayTeam.teamScore
    const homeRedCard = homeTeam.red
    const homeYellowCard = homeTeam.yellow
    const awayRedCard = awayTeam.red
    const awayYellowCard = awayTeam.yellow

    const scoreTemplate = `${homeScore} - ${awayScore}`
    const VSTemplate = `VS`
    const cardTemplate = (color, number) => {
        const cardStyle = {
            display: 'inline-block',
            width: '14px',
            height: '16px',
            backgroundColor: color === 'yellow' ? 'rgba(255,165,0,1)' : 'rgba(255,57,36,1)',
            color: '#fff',
            marginLeft: '2px',
            textAlign: 'center',
            fontSize: '12px',
            paddingBottom: '2px',
        }
        return <div style={cardStyle}>{number}</div>
    }

    const player = player => {
        const template = (
            <div className='game-football-game-item-player-ctn'>
                <span style={{fontWeight: 'bold',}}>{player.name}</span>
                {player.yellow ? cardTemplate('yellow', player.yellow) : null}
                {player.red ? cardTemplate('red', player.red) : null}
            </div>
        )
        return template
    }

    const p1 = {
        name: homeTeamName,
        red: homeRedCard,
        yellow: homeYellowCard,
    }

    const p2 = {
        name: awayTeamName,
        red: awayRedCard,
        yellow: awayYellowCard,
    }

    const playerTemplate = (
        <div className='flex-center-align-center game-football-game-item-vs-ctn'>
            {player(p1)}
            <div className={`game-football-game-item-vs ${!isEarly ? 'game-football-game-item-vs-on-live' : ''}`}>
                {!isEarly ? scoreTemplate : VSTemplate}
            </div>
            {player(p2)}
        </div>
    )

    // footer template

    const homeTeamCorner = homeTeam.corner
    const awayTeamCorner = awayTeam.corner
    const homeTeamPenalty = homeTeam.penalty
    const awayTeamPenalty = awayTeam.penalty

    const isPenalty = homeTeamPenalty > 0 || awayTeamPenalty > 0



    const arrow = <Icon type="right" style={{
        color: '#333',
        opacity: '0.4',
        position: 'absolute',
        right: '18px',
        top: '50%',
        transform: 'translateY(-50%)'
    }}/>

    const mainTemplate = (
        // <div className='flex-space-between flex-column game-football-game-item'>
        <div className='search-game-item'>
            {headerTemplate}
            {playerTemplate}
            {arrow}
        </div>
    )

    // additional  message template
    let addMsg = ''
    if (stage) {
        // console.log('stage', stage)
        const {
            round_count,
            group_count,
            mode,
            name_zh,
        } = stage

        if (mode) {
            const text = mode === 1 ? '积分赛-' : '淘汰赛-'
            addMsg += text
        }

        if (group_count > 0) {
            addMsg += `第${group_count}组-`
        }

        if (round_count > 0) {
            addMsg += `第${round_count}轮-`
        }

        addMsg += name_zh
    }



    function goToGame(e) {
        e.stopPropagation()
        let AIBtnClick = false
        if (e.target.id === 'ai') {
            AIBtnClick = true
        }
        history.push(`./game/${matchId}`, {matchId, status, AIBtnClick, date,})
    }

    return (
        <div
            onClick={(e) => goToGame(e)}
            style={{
                position: 'relative',
            }}
        >
            {mainTemplate}
        </div>
    )
    // return null
}

export default withRouter(SearchGameCard)
